<template>
  <el-container style="height: 100vh; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu router default-active="/bookinfo" :default-openeds="['1']">
        <el-submenu index="1">
          <template slot="title"><i class="el-icon-setting"></i>导航一</template>
          <el-menu-item index="/bookinfo"><i class="el-icon-reading"></i>图书列表</el-menu-item>
          <el-menu-item index="/about"><i class="el-icon-reading"></i>about页面</el-menu-item>
          <el-menu-item index="/booktype">
            <i class="el-icon-reading"></i>
            <span slot="title">分类管理</span>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <div style="display: flex; align-items: center; justify-content: flex-end;">
          <span style="margin-right: 10px;">欢迎，{{ username }}</span>
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px; cursor: pointer;"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="logout">注销登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>

      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  // 注意：这个组件可能需要一个名称，如果它被用作路由组件或组件注册。
  // 例如：name: 'AdminLayout'
  data() {
    return {
      // 从 localStorage 获取用户名，如果不存在则显示 '管理员' 作为默认值
      username: localStorage.getItem('username') || '管理员'
    };
  },
  methods: {
    logout() {
      // 清除本地存储的token和用户信息
      localStorage.removeItem('token');
      localStorage.removeItem('username');
      localStorage.removeItem('isAdmin');
      // 可以添加一个 Element UI 的提示信息，例如：
      this.$message.success('已成功注销');
      // 跳转回登录页面
      this.$router.push('/login');
    }
  }
};
</script>

<style scoped>
/* 保持你的原有样式不变 */
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>